(function(window){
	function $(selector){
		var el;
		if(/#/.test(selector))
			el = document.getElementById(selector.substring(1));
		else if(/\./.test(selector))
			el = document.getElementsByClassName(selector.substring(1))[0];
		return el;
	}
	window.$ = $;
})(window);



(function(window){
	function Layer(el){
		this.el = el;
		this.title = this.el.getElementsByClassName('title')[0];
		this.body = this.el.getElementsByClassName('body')[0];
		this.footer = this.el.getElementsByClassName('footer')[0];
		this.determine = this.footer.children[0];
		this.cancel = this.footer.children[1];
		this.init();
	}
	Layer.prototype = {
		constructor: Layer,
		init: function(){
			var self = this;
			this.resize();				//初始化
			this.center();				//居中
			this.mask_layer();		//显示蒙层
			this.drap();					//拖拽
			this.change_size();		//变化大小
			this.determine.onclick = function(){
				self.hide.call(self);
			};
			this.cancel.onclick = function(){
				self.hide.call(self);
			};
			this.cancel.onclick = function(){
				self.hide.call(self);
			};
			this.mask.onclick = function(){
				self.el.style.display = 'none';
				this.style.display = 'none';
			};
		},
		resize: function(){
			this.el.style.background = '#fff';
			this.el.style.width = '400px';
			this.el.style.borderRadius = '10px';
			this.el.style.border = '2px solid #333';
			this.title.style.textAlign = 'center';
			this.title.style.background = '#b7c69a';
			this.title.style.borderRadius = '10px 10px 0 0';
			this.title.style.cursor = 'move';
			this.body.style.border = '1px solid #ccc';
			this.body.style.minHeight = '100px';
			this.body.style.Height = '100%';
			this.footer.style.textAlign = 'right';
			this.determine.style.margin = '0 10px';
			this.cancel.style.margin = '0 10px';
			this.determine.style.height = this.cancel.style.height = '30px';
			this.determine.style.width = this.cancel.style.width = '50px';
			this.determine.style.color = this.cancel.style.color = '#fff';
			this.determine.style.cursor = this.cancel.style.cursor = 'pointer';
			this.determine.style.background = 'green';
			this.cancel.style.background = 'red';
			this.span = document.createElement('span');
			this.span.style.cursor = 'se-resize';
			this.span.style.position = 'absolute';
			this.span.style.bottom = 0;
			this.span.style.right = 0;
			this.span.style.width = '10px';
			this.span.style.height = '10px';
			this.el.appendChild(this.span);
		},
		center: function(){
			this.el.style.position = 'fixed';
			this.el.style.top = (document.documentElement.clientHeight - this.el.clientHeight)/2 +'px';
			this.el.style.left = (document.documentElement.clientWidth - this.el.clientWidth)/2 + 'px';
			this.el.style.zIndex = 10000;
		},
		mask_layer: function(){
			this.mask = document.createElement('div');
			this.mask.style.position = 'fixed';
			this.mask.style.zIndex = 9999;
			this.mask.style.top = 0;
			this.mask.style.left = 0;
			this.mask.style.right = 0;
			this.mask.style.bottom = 0;
			this.mask.style.background = 'rgba(0,0,0,0.2)';
			document.body.appendChild(this.mask);
		},
		drap: function(){
			var self = this;
			this.title.addEventListener('mousedown',function(e){
				(function(e,self){
					self.x = self.getPointer().x;
					self.y = self.getPointer().y;
					self.currentX = parseInt(self.el.offsetLeft);
					self.currentY = parseInt(self.el.offsetTop);
					self.flag = true;
				})(e,self);
			},false);
			this.title.addEventListener('mousemove',function(e){
				(function(e,self){
					if(self.flag){
						var now = self.getPointer();
						var x = now.x - self.x;
						var y = now.y - self.y;
						self.el.style.left = self.currentX + x + 'px';
						self.el.style.top = self.currentY + y + 'px';
					}
				})(e,self);
			},false);
			this.title.addEventListener('mouseup',function(){
				self.flag = false;
			},false);
		},
		change_size: function(){
			var self = this;
			this.span.addEventListener('mousedown',function(e){
				(function(e,self){
					self.x1 = self.getPointer().x-2;
					self.y1 = self.getPointer().y-2;
					self.currentX1 = parseInt(self.el.clientWidth);
					self.currentY1 = parseInt(self.el.clientHeight);
					self.flag1 = true;
				})(e,self);
			},false);
			this.span.addEventListener('mousemove',function(e){
				(function(e,self){
					if(self.flag1){
						var now1 = self.getPointer();
						var x = now1.x - self.x1;
						var y = now1.y - self.y1;
						self.el.style.width = self.currentX1 + x + 'px';
						self.el.style.height = self.currentY1 + y + 'px';
					}
				})(e,self);
			},false);
			this.span.addEventListener('mouseup',function(){
				self.flag1 = false;
			},false);
		},
		getPointer: function(e){
			var e = e || window.event;
			var x = e.x || e.clientX;
			var y = e.y || e.clientY;
			return {x:x, y:y};
		},
		hide: function(a){
			var self = this;
			self.id = requestAnimationFrame(function(){
				self.hide.call(self, a);
			});
			if(a == undefined)
				a = 1;
			self.mask.style.opacity = a;
			this.el.style.transform = 'scale('+ a +','+ a +')';
			a = a - 0.01;
			if(a < 0){
				cancelAnimationFrame(self.id);
				this.mask.style.display = 'none';
				this.el.style.display = 'none';
			}
		},
		show: function(a){
			var self = this;
			self.id = requestAnimationFrame(function(){
				self.show.call(self, a);
			});
			if(a == undefined){
				a = 0;
				this.mask.style.display = 'block';
				this.el.style.display = 'block';
				this.center();
			}
			self.mask.style.opacity = a;
			this.el.style.transform = 'scale('+ a +','+ a +')';
			a = a + 0.01;
			if(a > 1)
				cancelAnimationFrame(self.id);
		},

	};

	window.Layer = Layer;
})(window);